<template>
  <div >
    <div v-if="percentage>0 && percentage<100"
         style="width: 100%;height: 100%;position: absolute;background: rgba(0,0,0,0.5);z-index: 999;">
        <div style="width: 80%;margin: 30% auto">
          <div style="color: #ffffff;margin-bottom: 30px">下载中，请耐心等待</div>
          <el-progress
              :text-inside="true"
              :stroke-width="20"
              status="success"
              :percentage="percentage">
          </el-progress>
        </div>
    </div>

    <el-table
        :data="list"
        border
        :header-cell-style="{'text-align':'center'}"
        style="width: 100%">
      <el-table-column
          prop="title"
          label="图标"
          align="center"
          width="80">
        <template slot-scope="scope">
          <img style="width: 50px;height: 50px;" :src="fileRoot+scope.row.pic" alt="">
        </template>
      </el-table-column>
      <el-table-column
          prop="title"
          label="软件名称"
          align="center"
          width="180">
        <template slot-scope="scope">
          <div>{{scope.row.title}}</div>
          <div style="color: #377ab7;font-weight: bold">({{ (scope.row.update_time || '').split(' ')[0] }})</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="info"
          label="软件介绍">
        <template slot-scope="scope">
          <div v-html="scope.row.info"></div>
        </template>
      </el-table-column>
      <el-table-column
          prop="downdata"
          label="下载"
          align="center"
          width="150">
        <template slot-scope="scope">
          <template v-for="(t, index) in scope.row.downdata">
            <div :key="String(index)"
                @click="fileDownload(t)"
                style="cursor: pointer;background-color: #377ab7;color: #ffffff;padding: 5px;border-radius: 5px;margin-top: 5px;margin-bottom: 5px" >
              {{t.name}}
            </div>
          </template>

<!--            <a :href="fileRoot + t.url" :download="t.filelist[0].name" :key="String(index)"  v-for="(t, index) in scope.row.downdata">-->
<!--              <div style="cursor: pointer;background-color: #377ab7;color: #ffffff;padding: 5px;border-radius: 5px;margin-top: 5px;margin-bottom: 5px" >-->
<!--                {{t.name}}-->
<!--              </div>-->
<!--            </a>-->
        </template>
      </el-table-column>

      <el-table-column
          prop="downInfoData"
          label="使用说明"
          align="center"
          width="150">
        <template slot-scope="scope">
          <div>
            <div
                @click="fileDownload(scope.row.downInfoData)"
                style="cursor: pointer;background-color: #ff0000;color: #ffffff;padding: 5px 0;border-radius: 5px;margin-top: 5px;margin-bottom: 5px" >
              说明书下载
            </div>
          </div>

<!--          <div v-for="(item, index) in scope.row.downInfoData" :key="index">-->
<!--&lt;!&ndash;{{item}}{{index}}&ndash;&gt;-->
<!--            <div-->
<!--                v-if="index=='url'"-->
<!--                @click="fileDownload(item)"-->
<!--                style="cursor: pointer;background-color: #ff0000;color: #ffffff;padding: 5px 0;border-radius: 5px;margin-top: 5px;margin-bottom: 5px" >-->
<!--              说明书下载-->
<!--            </div>-->
<!--          </div>-->

        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="currentChange"
          :small="true"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getListClid} from "@/utils/serve/classify";
import { getConfigByPrefix } from "@/utils/serve/web";
export default {
  name: "ListLife",
  props: {
    downClassId:{
        type: Number,
        default: 0
    },
    fileRoot:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      id: this.downClassId,
      list: [],
      page: {
        pageSize: 15, // 每页显示条数
        total: 0 //总条数
      },
      percentage: 0
    };
  },
  watch: {
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    down(e){
      window.open(this.fileRoot + e.url, '_blank')
    },
    /**
     * todo 下载
     * @param  {String} url 目标文件地址
     * @param  {String} filename 想要保存的文件名称
     */
    fileDownload(e) {
      // eslint-disable-next-line no-debugger
      // debugger
      let _this = this;
      _this.percentage = 0;
      let downurl = this.fileRoot + e.url;
      if(_this.downSetting==2){
        downurl = 'https://testcdn.nzfco.com/'+e.aliurl;
      }
      console.log('下载地址',downurl)
      _this.getBlob(downurl, function(blob) {
        _this.saveAs(blob, e.filelist[0].name)
      })
    },
    getConfigByPrefix(e) {
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      getConfigByPrefix(e, res => {
        _this.$store.commit("setIsLoading", false);
        if (res.code == 0) {
          _this.downSetting = res.data.down_cdn;
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    getBlob(url,cb) {

      let _this = this;

      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);


      //监听进度事件
      xhr.addEventListener(
          "progress",
          function(evt) {
            if (evt.lengthComputable) {
              let percentComplete = evt.loaded / evt.total;
              // _this.downloads[index].percentage = percentComplete * 100;
              _this.percentage = Math.round(percentComplete * 100);
            }
          },
          false
      );

      xhr.responseType = 'blob';
      xhr.onload = function() {
        if (xhr.status === 200) {
          cb(xhr.response);
        }
      };
      xhr.send();
    },
    /**
     * 保存
     * @param  {Blob} blob
     * @param  {String} filename 想要保存的文件名称
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement('a');
        var body = document.querySelector('body');

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);

        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
      }
    },
    // 方法
    antclick(e){
      this.$emit("antClick", e);
    },
    getListClid(page){
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      getListClid(this.id, this.page.pageSize, page,res=>{
        _this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code==0){
          _this.list = res.data.list;
          _this.page.total = res.data.total;
        }
      })
    },
    // eslint-disable-next-line no-unused-vars
    currentChange(e) {
      this.getListClid(e);
    }
  },
  mounted() {
    this.getListClid(1);
    // this.getConfigByPrefix('down_')
  }
};
</script>

<style scoped lang="scss">
@import "./read";
</style>
